<template>
  <div style="padding: 1vh 1vw; margin-left: 20vw; width: 78vw; height: 98vh">
    <div id="extendTest"></div>
  </div>
</template>

<script>
import Vue from "vue";

export default {
  data() {
    return {};
  },
  methods: {
    initExtend() {
      // 创建构造器
      let Profile = Vue.extend({
        template: "<p>{{firstName}} {{lastName}} aka {{alias}}</p>",
        data: function () {
          return {
            firstName: "Walter",
            lastName: "White",
            alias: "Heisenberg",
          };
        },
      });
      // 创建 Profile 实例，并挂载到一个元素上。
      new Profile().$mount("#extendTest");
    },
  },
  mounted() {
    this.$nextTick(()=>{
        this.initExtend();
    })
  },
};
</script>

<style>
</style>